<template>
    <div class="header">
            <div class="w">
                <div class="header-left">
                    <span>广东</span>
                </div>
                <div class="header-right">
                    <ol>
                        <li class="fl">
                            <div class="header-item">
                                <a href="">你好，请登录</a>
                                <a href="" style="color: #f10215;">免费注册</a>
                            </div>
                        </li>
                        <li class="space">|</li>
                        <li class="fl">
                            <div class="header-item">
                                <a href="">{{daohans[0].text}}</a>
                            </div>
                        </li>
                        <li class="space">|</li>
                        <li class="fl">
                            <div class="header-item">
                                <a href="">我的京东</a>
                            </div>
                        </li>
                        <li class="space">|</li>
                        <li class="fl">
                            <div class="header-item">
                                <a href="">京东会员</a>
                            </div>
                        </li>
                        <li class="space">|</li>
                        <li class="fl">
                            <div class="header-item">
                                <a href="" style="color: #f10215;">企业采购</a>
                            </div>
                        </li>
                        <li class="space">|</li>
                        <li class="fl">
                            <div class="header-item">
                                <a href="">客户服务</a>
                            </div>
                        </li>
                        <li class="space">|</li>
                        <li class="fl">
                            <div class="header-item">
                                <a href="">网站导航</a>
                            </div>
                        </li>
                        <li class="space">|</li>
                        <li class="fl">
                            <div class="header-item">
                                <a href="">手机京东</a>
                            </div>
                        </li>
                    </ol>
                </div>
            </div>
    </div>
</template>

<script>
import '../data/daohan.js'
export default {
    data(){
        return{
            daohans:[
                {text: '我的订单'},
                {text: '我的京东'},
                {text: '京东会员'},
                {text: '企业采购'},
                {text: '客户服务'},
                {text: '网站导航'},
                {text: '手机京东'},
            ]
        }
    }
}
</script>

<style lang="stylus" scoped>
.header{
    width: 100%;
    height: 35px;
    background-color: #e3e4e5;
}
.header-left{
    float: left;
}
.header-left span {
    position: relative;
    color: #999;
    font-size: 13px;
    top: 6px;
    left: 20px;
}

.header-right{
    float: right;
 
}
.header-right ol{
    
    float: left;
}
.fl{
    float: left;
}
.header-item a{
    color: #999;
    font-size: 12px;
    position: relative;
    top: 5px;
}
.space {
    float: left;
    position: relative;
    top: 5px;
    color: #ccc;
    margin: 0 10px;
}
</style>